
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="./dom-to-image.js" type="application/javascript"></script>
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #container {
        display: inline-block;
    }
</style>

<body>
    <h1>软件传媒创客贴渲染器 V1</h1>
    <textarea id="domCode" cols="30" rows="10"></textarea>
    <button onclick="draw();dom2base64(document.getElementById('container'))"> 生成图片 </button>
    <div>
        SVG:
        <div id="container"></div>
    </div>

    <script>
        const img2base64 = element => {
            return new Promise((resolve, reject) => {
                const img = new Image();
                // 处理 canvas 受污染的情况
                img.crossOrigin = "anonymous";
                img.onerror = reject;
                img.onload = function () {
                    const canvas = document.createElement("canvas");
                    const ctx = canvas.getContext("2d");
                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;
                    ctx.drawImage(this, 0, 0);
                    let base = canvas.toDataURL()
                    resolve(base);
                };
                img.src = element.href.baseVal;
            });
        };
        function draw() {
            let container = document.getElementById('container')
            container.innerHTML = document.getElementById('domCode').value
        }

        async function dom2base64(node) {
            let mask = document.querySelector(".canvas.water-mark")
            mask && mask.parentNode.removeChild(mask)
            let cktCanvas = node.querySelector(".canvas-slot-inner")
            cktCanvas && (cktCanvas.style.transform = "")
            const imageElements = node.querySelectorAll("image");
            imageElements.forEach(async element => {
                element.setAttribute("href", await img2base64(element))
            });
            const imgElements = node.querySelectorAll(".text-3d-image");
            imgElements.forEach(async element => {
                element.remove()
            });
            //  = base
            // const base64Result = await Promise.all(imgElements.map());

            // console.log(base64Result)
            setTimeout(() =>
                domtoimage.toPng(node, {
                    quality: 100,
                    scale: 4,
                    height: node.scrollHeight,
                    width: node.scrollWidth
                }).then(function (dataUrl) {
                    let img = document.createElement("img")
                    img.src = dataUrl
                    img.style.width = "100%"
                    document.body.appendChild(img)
                }), 1e3)
        }
        HTMLElement.prototype.remove = function () { this.parentElement.removeChild(this) }
    </script>
</body>

</html>